<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <button onclick="console.log(11);console.log(this)">按钮2</button>
    <button onclick="fn()">按钮2</button>
    <script>
        /*
            事件： 用户操作页面引起的行为，前端需要处理 会执行一段代码
                js事件驱动
                前端处理用户交互

            核心：  怎么给一个元素添加给事件或者监听这个元素的事件


            两种：
                dom0事件处理程序
                  1-  dom.on+事件名= function(){ }
                      dom.onclick = function(){}
                      click叫事件名
                     后面的函数叫事件处理函数（不需要自己调用-一般浏览器发现用户点击了这个按钮-会自动调用这个函数）
                      ***事件处理函数内部可以使用一个关键字  this ，这个this，我们给谁添加的事件，函数内的this就是谁
                  2-行内事件  
                        <button onclick="console.log(11)">按钮2</button>
                        <button onclick="一段代码">按钮2</button>
                        引号用也可以使用this关键字，这个this，我们给谁添加的事件，函数内的this就是谁
                        不用获取元素 就可以添加事件
               
                dom0删除事件 --覆盖原理的事件处理函数

            dom2事件处理
        */
        // ------dom0事件处理程序

        // 给按钮添加点击事件
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            console.log('点击了btn');
            console.log(this);
        }


        // 行内事件的第二种写法，只是在事件执行的时候，调用了fn函数(普通函数不是事件处理函数)
        function fn() {
            console.log('点击了按钮');
            console.log(this);//->window
        }


        // dom0删除
        btn.onclick = null;



    </script>

</body>

</html>